<template>
    <div v-if="isVisible" class="message">
        <div class="backCloseBox" @click="closeModal"></div>
        <div class="messageBox">
            <div class="iconimg" :class="type"></div>
            {{ message }}
        </div>
    </div>
</template>

<script>
export default {
    name: 'Message',
    props: {
        isVisible: {
            type: Boolean,
            default: false
        },
        type: {
            type: String,
            default: 'info',
        },
        message: {
            type: String,
            required: true,
        },
    },
    methods: {
        closeModal() {
            this.$emit('update:isVisible', false);
        }
    }
};

</script>

<style scoped lang="scss">
.message {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    /* 设置宽度 */
    height: 100vh;
    /* 设置高度 */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;

    .backCloseBox {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        /* 设置宽度 */
        height: 100vh;
        background-color: #0003
    }

    .messageBox {
        position: relative;
        font-size: 23px;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
        padding: 20px 10px;
        max-width: 60%;
        border-radius: 20px;
        background-color: #fff;

        /* 垂直水平居中 */
        .iconimg {
            margin: 0 auto;
            height: 200px;
            width: 200px;
        }

        .default {
            background-color: #2196f3;
        }

        .success {
            background-color: #4caf50;
        }

        .warning {
            background-color: #ff9800;
        }

        .error {
            background-color: #f44336;
        }
    }
}
</style>
